<template>
    <div>
        <div class="topmsg">
            <div class="img">
                <img crossorigin="anonymous" :src="myimg" alt="" />
            </div>
            <div>
                <div class="msgtop">Hi，{{ myname }}欢迎登入</div>
                <div class="msgdetail">
                    <div>手机号码：{{ myphone }}</div>
                    <div class="line"></div>
                    <div>{{ myrolename }}</div>
                    <!--          <el-button type="info" size="small" style="margin-left: 20px" @click="outerVisible = true">保险撤销-->
                    <!--          </el-button>-->
                    <!--          <el-button type="info" size="small" style="margin-left: 20px" @click="yjxb">一键续保-->
                    <!--          </el-button>-->
                </div>
            </div>
        </div>
        <div class="paddingbox">
            <div class="box">
                <div class="boxl">
                    <dayAndLongWirhTimeDate></dayAndLongWirhTimeDate>
                </div>
                <div class="boxr">
                    <messageComponent></messageComponent>
                    <div class="utilbox">
                        <div class="toptitle">快捷工具</div>
                        <div class="utilboxinner mb-10px">
                            <div class="utilitem pointer" @click="yjxb">
                                <img class="utilimg" src="./img/yjxb.png" />
                                <div class="text">一键续保</div>
                            </div>
                            <div class="utilitem pointer" @click="showlxsbcx = true">
                                <img class="utilimg" src="./img/lxsbcx.png" />
                                <div class="text">薪资状态查询</div>
                            </div>
                            <div class="utilitem pointer" @click="totbrycx">
                                <img class="utilimg" src="./img/tbrycx.png" />
                                <div class="text">投保人员查询</div>
                            </div>
                            <div class="utilitem pointer" @click="toygzx">
                                <img class="utilimg" src="./img/ygzx.png" />
                                <div class="text">账号管理</div>
                            </div>
                        </div>
                        <div class="utilboxinner mb-10px">
                            <div class="utilitem pointer" @click="cxbd">
                                <img class="utilimg" src="./img/cxbd.png" />
                                <div class="text">撤销保单</div>
                            </div>
                            <div class="utilitem pointer" @click="tobmd">
                                <img class="utilimg" src="./img/bmd.png" />
                                <div class="text">白名单</div>
                            </div>
                            <div class="utilitem pointer" @click="tohmd">
                                <img class="utilimg" src="./img/hmd.png" />
                                <div class="text">黑名单</div>
                            </div>
                            <div class="utilitem pointer" @click="tobsqy">
                                <img class="utilimg" src="./img/bsqy.png" />
                                <div class="text">保司迁移</div>
                            </div>
                        </div>
                        <div class="utilboxinner">
                            <div class="utilitem pointer" @click="showResetCaptcha = true">
                                <img class="utilimg" src="./img/czyzm.png" />
                                <div class="text">重置验证码</div>
                            </div>
                        </div>
                    </div>
                    <div class="dclbox">
                        <div class="toptitle">待处理</div>
                        <div class="dclboxinner mg-b-10">
                            <div class="item" @click="topqdwsp">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.serveCompanyAudit" />
                                    <img src="./img/more.png" alt="" />
                                </div>
                                <div class="bottom">派遣单位审批</div>
                            </div>
                            <div class="item" @click="toczsp">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.rechargeAudit" />
                                    <img src="./img/more.png" alt="" />
                                </div>
                                <div class="bottom">充值审批</div>
                            </div>
                            <div class="item" @click="tobacl">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.reportAudit" />
                                    <img src="./img/more.png" alt="" />
                                </div>
                                <div class="bottom">报案处理</div>
                            </div>
                        </div>
                        <div class="dclboxinner">
                            <div class="item" @click="toyebztx">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.balanceLack" />
                                    <img src="./img/more.png" alt="" />
                                </div>
                                <div class="bottom">余额不足提醒</div>
                            </div>
                            <div class="item" @click="tolzcykhfp">
                                <div class="top">
                                    <CountUp class="fs-24 bold fm-din-bold" :decimalPlaces="0"
                                        :end-val="waitmsg.waitAllocated" />
                                    <img src="./img/more.png" alt="" />
                                </div>
                                <div class="bottom">待分配客户</div>
                            </div>
                            <div class="itemc"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog v-model="outerVisible" title="撤销保单" :width="isMobile ? '580' : '30%'" :close-on-click-modal="false">
            <template #default>
                <div>
                    <span>客户名称</span>
                    <el-input v-model="cxbdkhmc" placeholder="请输入客户名称" style="width: 60%; margin-left: 10px"></el-input>
                </div>
                <el-dialog :close-on-click-modal="false" v-model="innerVisible" width="60%" title="保单可撤销列表"
                    append-to-body>
                    <template #header="{ close, titleId, titleClass }">
                        <div class="my-header">
                            <div>保单可撤销列表</div>
                            <div class="blue cxjl" @click="opencxjllist">
                                撤销记录
                            </div>
                        </div>
                    </template>
                    <template #default>
                        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                            v-model:page-info="pageInfo" @pageChange="handlePageChange">
                            <template #total>
                                <el-table-column label="人数">
                                    <template #default="scope">
                                        <el-popover :ref="(el) => setRefs(el, scope.row)
                                            " trigger="hover" placement="right" width="326" :popper-options="{
                                                boundariesElement: 'viewport'
                                            }" @before-enter="
                                                beforeenter(scope.row)
                                                ">
                                            <template #reference>
                                                <div class="blue pointer">
                                                    {{ scope.row.total }}
                                                </div>
                                            </template>

                                            <el-table :header-cell-style="{
                                                background: '#FAFAFC',
                                                color: '#202536'
                                            }" :data="tcdate" max-height="300" width="100%">
                                                <el-table-column width="100" property="userName" label="姓名" />
                                                <el-table-column width="200" property="idCardNo" label="身份证号" />
                                            </el-table>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                            </template>
                            <template #operate>
                                <el-table-column label="操作" fixed="right">
                                    <template #default="scope">
                                        <div class="blue pointer" @click="toinnerdetail(scope.row)">
                                            撤销
                                        </div>
                                    </template>
                                </el-table-column>
                            </template>
                        </tableComponent>
                        <el-dialog :close-on-click-modal="false" v-model="cxjllisttc" :width="isMobile ? '1150' : '60%'"
                            title="保单撤销记录" append-to-body>
                            <filterComponent hideHead v-model:filter-data="filterDatacxls"
                                @doSearch="handleSearchcxls" />
                            <tableComponent class="set-height" :table-header="tableHeadercxls"
                                :table-data="tableDatacxls" v-model:page-info="cxlspageInfo"
                                @pageChange="handlePageChangecxls">
                                <template #operate>
                                    <el-table-column fixed="right" label="操作" width="120">
                                        <template #default="scope">
                                            <el-button link size="small" class="blue"
                                                @click="tocxlsxq(scope.row)">详情</el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                            </tableComponent>
                            <el-dialog :close-on-click-modal="false" v-model="cxjllisttcdetail"
                                :width="isMobile ? '1150' : '60%'" title="已撤销保单详情" append-to-body>
                                <div class="cxbdxqtopmsg">
                                    <div class="item">
                                        <div class="label">撤销人数：</div>
                                        <div class="labelcontent">
                                            {{ pageInfodtl.total }}人
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="label">撤销时间：</div>
                                        <div class="labelcontent">
                                            {{ cxdetailtime }}
                                        </div>
                                    </div>
                                </div>
                                <tableComponent class="set-height" :table-header="tableHeader1"
                                    :table-data="tableDatacxdtl" v-model:page-info="pageInfodtl"
                                    @pageChange="handlePageChangecxdtl">
                                </tableComponent>
                            </el-dialog>
                        </el-dialog>
                        <el-dialog :close-on-click-modal="false" v-model="innerVisible3"
                            :width="isMobile ? '1150' : '60%'" title="可撤销保单详情" append-to-body>
                            <div class="cxbdxqtopmsg">
                                <div class="item">
                                    <div class="label">
                                        当前1-4类方案最低人数：
                                    </div>
                                    <div class="labelcontent">
                                        <span v-if="
                                            plan.type == 3 &&
                                            plan.ensurelimit != null &&
                                            plan.ensurelimit > 0
                                        ">{{ plan.ensurelimit }}</span>
                                        <span v-else>{{
                                            plan.ensureLimitFour
                                            }}</span>
                                        人
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="label">
                                        当前方案投保人数：{{
                                            ensureByPlanCodelength
                                        }}
                                    </div>
                                    <div class="labelcontent">人</div>
                                </div>
                                <div class="item">
                                    <div class="label">
                                        撤销人数：{{ pageInfo1.total }}
                                    </div>
                                    <div class="labelcontent">人</div>
                                </div>
                                <div class="item" v-if="cxinfo.operationType !== 1">
                                    <div class="label">
                                        撤销后当前方案投保人数：{{
                                            ensureByPlanCodelength -
                                            pageInfo1.total
                                        }}
                                    </div>
                                    <div class="labelcontent">人</div>
                                </div>
                                <el-button type="primary" @click="bxcxfn">撤销</el-button>
                            </div>
                            <tableComponent class="set-height" :table-header="tableHeader1" :table-data="tableData1"
                                v-model:page-info="pageInfo1" @pageChange="handlePageChange1">
                            </tableComponent>
                        </el-dialog>
                    </template>
                </el-dialog>
            </template>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="cxbdsearch">
                        搜索
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <insurerenewalDialog v-model:show="showYjxb"></insurerenewalDialog>
        <failedPayrollSearch v-model:show="showlxsbcx"></failedPayrollSearch>
        <employeeCancellation v-model:show="showygzx"></employeeCancellation>
        <resetCaptcha v-model:show="showResetCaptcha"></resetCaptcha>
    </div>
</template>

<script setup lang="ts">
import CountUp from 'vue-countup-v3'
import { getuserinfoapi } from '../../api/api'
import { ref, onMounted, nextTick } from 'vue'
import tableComponent from '@/components/tableComponent/index.vue'
import insurerenewalDialog from '@/views/insurerenewalDialog/insurerenewalDialog.vue'
import failedPayrollSearch from '@/views/failedPayrollSearch/failedPayrollSearch.vue'
import employeeCancellation from '@/views/employeeCancellation/employeeCancellation.vue'
import resetCaptcha from '@/views/resetCaptcha/resetCaptcha.vue'
import messageComponent from './messageComponent.vue'
import dayAndLongWirhTimeDate from './dayAndLongWirhTimeDate.vue'
import filterComponent from '@/components/filterComponent/index.vue'
import { ElMessage } from 'element-plus'
import {
    getqueryRevokeensurelistapi,
    getInsurComCompanyPlansapi,
    revokeensureapi,
    getdetailrecordIdapi,
    getqueryalreadyrevokeensureListapi,
    getqueryinsurlistapi
} from '@/api/operationHomepage.ts'
import { useRouter } from 'vue-router'
import { getwaithandlejobapi } from '../../api/operationHomepage'
// let loading = ref(false);/
const isMobile = ref((window as any).isMobile)

const poprefs = ref({}) as any
const setRefs = (el: any, row: any) => {
    poprefs[row.id] = el
}

const beforeenter = (val: any) => {
    tcdate.value = []
    getdetailrecordIdapi(
        {
            id: val.id,
            companyPlanId: val.companyPlanId,
            pageSize: 999999,
            pageNum: 1
        },
        { noLoading: true }
    ).then((res: any) => {
        tcdate.value = res.rows
        nextTick(() => {
            poprefs[val.id].popperRef.popperInstanceRef.update()
        })
    })
}
const tcdate = ref<any>([])
const router = useRouter()
const showygzx = ref(false)
const showlxsbcx = ref(false)
const showResetCaptcha = ref(false)
const cxjllisttcdetail = ref(false)
const tocxlsxq = (val: any) => {
    pageInfodtl.value.pageNum = 1
    cxdetailtime.value = val.createTime
    dtlinfo.value.id = val.id
    dtlinfo.value.companyPlanId = val.companyPlanId
    getdetiallist()
    cxjllisttcdetail.value = true
    console.log(val, 'sdhjfghuyshgiuyduyghiud')
}
const dtlinfo = ref({
    id: '',
    companyPlanId: ''
})
const handlePageChangecxdtl = () => {
    getdetiallist()
}
const getdetiallist = () => {
    getdetailrecordIdapi({
        id: dtlinfo.value.id,
        companyPlanId: dtlinfo.value.companyPlanId,
        pageSize: pageInfodtl.value.pageSize,
        pageNum: pageInfodtl.value.pageNum
    }).then((res: any) => {
        console.log(res, '2222222222')
        tableDatacxdtl.value = res.rows
        pageInfodtl.value.total = res.total
    })
}
const tableDatacxdtl = ref<any>([])
const cxdetailtime = ref('')
const cxjllisttc = ref(false)
const opencxjllist = () => {
    cxjllisttc.value = true
    getqueryalreadyrevokeensureList(cxbdkhmc.value)
    filterDatacxls.value.list.companyName.value = cxbdkhmc.value
}

const handlePageChangecxls = () => {
    getqueryalreadyrevokeensureList(
        filterDatacxls.value.list.companyName.value
    )
}
const getqueryalreadyrevokeensureList = (val: any) => {
    getqueryalreadyrevokeensureListapi({
        pageSize: cxlspageInfo.value.pageSize,
        pageNum: cxlspageInfo.value.pageNum,
        companyName: val
    }).then((res: any) => {
        console.log(res, 'fghjksdghukdghikudijuhdfij')
        tableDatacxls.value = res.rows
        cxlspageInfo.value.total = res.total
    })
}
const handleSearchcxls = () => {
    getqueryalreadyrevokeensureList(
        filterDatacxls.value.list.companyName.value
    )
}
const filterDatacxls = ref({
    list: {
        companyName: {
            name: '公司',
            prop: 'companyName',
            value: '',
            placeholder: '请输入公司名称',
            type: 'input',
            inputType: 'text'
        }
    }
})
const tableDatacxls = ref<any>([])

const tableHeadercxls = ref([
    {
        label: '公司名称',
        prop: 'companyName',
        width: 200
    },
    {
        label: '操作类型',
        prop: 'msg'
    },
    {
        label: '人数',
        prop: 'total'
    },
    {
        label: '方案名称',
        prop: 'companyPlanName',
        width: 200
    },
    {
        label: '方案类型',
        prop: 'type',
        width: 100,
        map: {
            1: '微保',
            2: '日日保',
            3: '雇主险',
            4: '月保单',
            5: '即时生效'
        }
    },
    {
        label: '生效时间',
        prop: 'insurStartDate'
    },
    {
        label: '录入时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '录入人',
        prop: 'managerName'
    },
    {
        label: '状态',
        prop: 'operationType',
        map: {
            2: '已撤销'
        }
    },
    {
        label: '撤销时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '操作',
        prop: 'operate'
    }
])

const getwaithandlejob = () => {
    getwaithandlejobapi().then((res: any) => {
        console.log(res, 'waitwaitwaitwaitwaitwaitwaitwait')
        waitmsg.value = res
    })
}

const waitmsg = ref<any>({})
const tobacl = () => {
    router.push({ path: '/reportClaimAdjuster' })
}
const tolzcykhfp = () => {
    router.push({ path: '/AssigningCustomers' })
}
const toyebztx = () => {
    router.push({ path: '/Longterminsurance' })
}
const totbrycx = () => {
    router.push({ path: '/PolicyholderEnquiries' })
}
const tohmd = () => {
    router.push({ path: '/blacklist' })
}
const tobsqy = () => {
    router.push({ path: '/BaoSiQianYi' })
}
const tobmd = () => {
    router.push({ path: '/whitelist' })
}
const toygzx = () => {
    router.push({ path: '/employeeCancellation' })
}
const topqdwsp = () => {
    router.push({ path: '/approval', query: { current: 0 } })
}
const toczsp = () => {
    router.push({ path: '/approval', query: { current: 1 } })
}
onMounted(() => {
    getuserinfo()
    getwaithandlejob()
})

const cxbd = () => {
    outerVisible.value = true
    cxbdkhmc.value = ''
}
const outerVisible = ref(false)
const innerVisible = ref(false)
const innerVisible3 = ref(false)

const plan = ref<any>({})
const bxcxfn = () => {
    console.log('保险撤销')
    revokeensureapi({
        id: cxinfo.value.id,
        companyId: cxinfo.value.companyId,
        operationType: cxinfo.value.operationType,
        companyPlanId: cxinfo.value.companyPlanId,
        type: plan.value.type,
        insurStartDate: cxinfo.value.insurStartDate,
        createUserId: cxinfo.value.createUserId
    }).then((res: any) => {
        console.log(res, '撤销')
        if (res.code === 200) {
            innerVisible3.value = false
            getqueryRevokeensurelist()
            // innerVisible.value = false;
            // outerVisible.value = false;
            ElMessage({
                type: 'success',
                message: res.msg
            })
        }
    })
}
const toinnerdetail = (val: any) => {
    console.log(val)
    pageInfo1.value.pageNum = 1
    pageInfo1.value.pageSize = 10
    pageInfo1.value.total = 0
    getInsurComCompanyPlansapi({ id: val.companyPlanId }).then((res: any) => {
        plan.value = res
    })
    cxinfo.value.createUserId = val.createUserId
    cxinfo.value.id = val.id
    cxinfo.value.insurStartDate = val.insurStartDate
    cxinfo.value.companyPlanId = val.companyPlanId
    cxinfo.value.operationType = val.operationType
    cxinfo.value.companyId = val.companyId
    getdetailrecordIdapi({
        id: val.id,
        companyPlanId: val.companyPlanId,
        pageSize: pageInfo1.value.pageSize,
        pageNum: pageInfo1.value.pageNum
    }).then((res: any) => {
        console.log(res, '2222222222')
        tableData1.value = res.rows
        pageInfo1.value.total = res.total
    })

    getqueryinsurlistapi({
        companyId: val.companyId,
        insurCompany: val.insurCompany,
        insurCompanyPlanCode: val.insurCompanyPlanCode
    }).then((res: any) => {
        console.log(res, '3333333333')
        ensureByPlanCodelength.value = res.ensureByPlanCode.length
    })

    innerVisible3.value = true
}
const ensureByPlanCodelength = ref(0)
const cxinfo = ref<any>({
    id: '',
    companyPlanId: '',
    companyId: '',
    operationType: '',
    insurStartDate: ''
})
const getdetailrecordId = () => {
    getdetailrecordIdapi({
        id: cxinfo.value.id,
        companyPlanId: cxinfo.value.companyPlanId,
        pageSize: pageInfo1.value.pageSize,
        pageNum: pageInfo1.value.pageNum
    }).then((res: any) => {
        console.log(res, '2222222222')
        tableData1.value = res.rows
        pageInfo1.value.total = res.total
    })
}
const cxbdkhmc = ref('')
const tableHeader1 = ref([
    {
        label: '姓名',
        prop: 'userName'
    },
    {
        label: '身份证号',
        prop: 'idCardNo',
        width: 200
    },
    {
        label: '派遣单位',
        prop: 'serveCompanyName',
        width: 200
    },
    {
        label: '方案名称',
        prop: 'companyPlanName',
        width: 200
    },
    {
        label: '生效时间',
        prop: 'insurStartTime',
        width: 200
    },
    {
        label: '到期时间',
        prop: 'insurEndTime',
        width: 200
    },
    {
        label: '录入时间',
        prop: 'createTime',
        width: 200
    },
    {
        label: '风险等级',
        prop: 'occupationLevel'
    }
])
const tableHeader = ref([
    {
        label: '公司名称',
        prop: 'companyName',
        width: 250,
        fixed: 'left'
    },
    {
        label: '操作类型',
        prop: 'operationType',
        width: 100,
        map: {
            0: '加保',
            1: '减保'
        }
        // colorMap: {
        //   1: 'red'
        // }
    },
    {
        label: '人数',
        prop: 'total',
        width: 100
    },
    {
        label: '方案名称',
        prop: 'companyPlanName',
        width: 150
    },
    {
        label: '方案类型',
        prop: 'type',
        width: 100,
        map: {
            1: '微保',
            2: '日日保',
            3: '雇主险',
            4: '月保单',
            5: '即时生效'
        }
    },
    {
        label: '生效时间',
        prop: 'insurStartDate',
        width: 110
    },
    {
        label: '录入时间',
        prop: 'createTime',
        width: 110
    },
    {
        label: '录入人',
        prop: 'managerName',
        width: 100
    },
    {
        label: '状态',
        prop: 'isSuccess',
        width: 100,
        map: {
            0: '失败',
            1: '成功'
        }
    },
    {
        label: '操作',
        prop: 'operate',
        width: 130
    }
])
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const cxlspageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const pageInfo1 = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const pageInfodtl = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const cxbdsearch = () => {
    pageInfo.value.pageNum = 1
    pageInfo.value.pageSize = 10
    pageInfo.value.total = 0
    if (cxbdkhmc.value === '') {
        ElMessage({
            type: 'warning',
            message: '请输入客户名称'
        })
        return
    }
    innerVisible.value = true
    getqueryRevokeensurelist()
}
const handlePageChange = () => {
    getqueryRevokeensurelist()
}
const handlePageChange1 = () => {
    getdetailrecordId()
}
const getqueryRevokeensurelist = () => {
    getqueryRevokeensurelistapi({
        companyName: cxbdkhmc.value,
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum
    }).then((res: any) => {
        console.log(res, '撤销公司列表')
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}
const tableData = ref<any>([])
const tableData1 = ref<any>([])

const yjxb = () => {
    console.log('一键续保')
    showYjxb.value = true
}

const showYjxb = ref(false)
const getuserinfo = () => {
    getuserinfoapi().then((res: any) => {
        console.log(res, '个人信息')
        myname.value = res.user.nickName
        myimg.value = res.user.avatar
        myphone.value = res.user.phonenumber
        myisadmin.value = res.user.isCrmPcAdmin
        myrolename.value = res.user.roles[0].roleName
    })
}
const myimg = ref('')
const myrolename = ref('')
const myname = ref('')
const myphone = ref('')
const myisadmin = ref(0)
</script>

<style scoped lang="scss">
.dclbox {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px 0 16px 16px;
    margin-top: 14px;

    .dclboxinner {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item:hover {
            background-color: #eef6ff;

            .top {
                color: #3e5ff5;
            }
        }

        .item {
            flex: 1;
            border-radius: 4px;
            padding: 6px 40px 6px 4px;
            margin-right: 16px;

            .top {
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 24px;
                font-weight: bold;
            }

            .bottom {
                color: #9497b1;
                font-size: 14px;
            }
        }

        .itemc {
            flex: 1;
            border-radius: 4px;
            padding: 6px 40px 6px 4px;
            margin-right: 16px;

            .top {
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 24px;
                font-weight: bold;
            }

            .bottom {
                color: #9497b1;
                font-size: 14px;
            }
        }
    }

    .toptitle {
        font-size: 16px;
        color: #3d3d3d;
        font-weight: 700;
        margin-bottom: 16px;
    }
}

.utilbox {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
    margin-top: 14px;

    .utilboxinner {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .utilitem {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            .text {
                font-size: 14px;
            }

            .utilimg {
                width: 36px;
                height: 36px;
                margin-bottom: 8px;
            }
        }
    }

    .toptitle {
        font-size: 16px;
        color: #3d3d3d;
        font-weight: 700;
        margin-bottom: 16px;
    }
}

.topmsg {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 13px 16px;
    height: 70px;

    img {
        width: 44px;
        height: 44px;
        border-radius: 6px;
        margin-right: 12px;
    }

    .msgtop {
        font-size: 16px;
        color: #3d3d3d;
        font-weight: 700;
    }

    .msgdetail {
        margin-top: 8px;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #9497b1;

        .line {
            width: 2px;
            height: 12px;
            margin: 0 8px;
            background-color: #9497b1;
        }
    }
}

.cxbdxqtopmsg {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
}

.blue {
    color: #3e5ff5;
}

.box {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;

    .boxl {
        width: 69%;
        flex-shrink: 0;
    }

    .boxr {
        width: 30%;
        flex-shrink: 0;
    }
}

.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.pointer {
    cursor: pointer;
}

.my-header {
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cxjl {
    cursor: pointer;
    font-size: 16px;
}
</style>
